<!doctype html>
<html class="no-js">

<head>
    <title>幼儿园</title>
    <#include "/boya/template/meta.html" />
</head>

<body>
    <#import "/boya/template/marc.html" as mc />
    <@mc.content>
        <div id="app" class="page">
            <div class="title">每日营养 / 详情 /</div>
            <div class="info">
                <div>日期：{{ info.date }}</div>
                <div>
                    <i class="am-icon-circle"></i>
                    <span v-if="info.type == 1">早餐</span>
                    <span v-if="info.type == 2">午餐</span>
                    <span v-if="info.type == 3">晚餐</span>
                </div>
            </div>
            <table class="am-table table">
                <thead>
                    <tr>
                        <th>食物分类</th>
                        <th>食物</th>
                        <th>重量</th>
                        <!-- <th>操作</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in info.content">
                        <td class="am-text-middle">{{ item.category }}</td>
                        <td class="am-text-middle">{{ item.name }}</td>
                        <td class="am-text-middle">{{ item.weight }}g</td>
                        <!-- <td class="am-text-middle">
                            <button class="am-btn am-btn-danger am-btn-xs" @click="del(1)"><i class="am-icon-trash"></i>&nbsp;删除</button>
                        </td> -->
                    </tr>
                </tbody>
            </table>
            <div class="nutrition-detail">
                <div class="nutrition-detail-title">营养分析及改进建议</div>
                <table class="am-table am-table-bordered">
                    <thead>
                        <tr>
                            <th>营养素</th>
                            <th>全日标准量</th>
                            <th>在园标准量</th>
                            <th>在园实给量</th>
                            <th>在园实给 %</th>
                            <th>评价</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>热量(kcal)</td>
                            <td>1304</td>
                            <td>{{ standard.heat }}</td>
                            <td>{{ nutrition.heat }}</td>
                            <td>{{ heatPer | numFilter }}%</td>
                            <td>
                                <span v-if="heatPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>　碳水物供热</td>
                            <td>50-65%</td>
                            <td>{{ standard.carbohydrateHeating[0] * 100 }}-{{ standard.carbohydrateHeating[1] * 100 }}%</td>
                            <td>{{ nutrition.carbohydrateHeating }}</td>
                            <td>{{ carbohydrateHeatingPer | numFilter }}%</td>
                            <td>
                                <span v-if="carbohydrateHeatingPer > standard.carbohydrateHeating[1] * 100">多！</span>
                                <span v-else-if="carbohydrateHeatingPer < standard.carbohydrateHeating[0] * 100">少！</span>
                                <span v-else>OK！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>　脂肪供热</td>
                            <td>20-35%</td>
                            <td>{{ standard.adiposeHeating[0] * 100 }}-{{ standard.adiposeHeating[1] * 100 }}%</td>
                            <td>{{ nutrition.adiposeHeating }}</td>
                            <td>{{ adiposeHeatingPer | numFilter }}%</td>
                            <td>
                                <span v-if="adiposeHeatingPer > standard.adiposeHeating[1] * 100">多！</span>
                                <span v-else-if="adiposeHeatingPer < standard.adiposeHeating[0] * 100">少！</span>
                                <span v-else>OK！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>　蛋白质供热</td>
                            <td>12-15%</td>
                            <td>{{ standard.proteinHeating[0] * 100 }}-{{ standard.proteinHeating[1] * 100 }}%</td>
                            <td>{{ nutrition.proteinHeating }}</td>
                            <td>{{ proteinHeatingPer | numFilter }}%</td>
                            <td>
                                <span v-if="proteinHeatingPer > standard.proteinHeating[1] * 100">多！</span>
                                <span v-else-if="proteinHeatingPer < standard.proteinHeating[0] * 100">少！</span>
                                <span v-else>OK！</span>
                            </td>
                        <tr>
                            <td>蛋白质总量(g)</td>
                            <td>30</td>
                            <td>{{ standard.protein }}</td>
                            <td>{{ nutrition.protein }}</td>
                            <td>{{ proteinPer | numFilter }}%</td>
                            <td>
                                <span v-if="proteinPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        </tr>
                        <tr>
                            <td>　动物蛋白</td>
                            <td>30%</td>
                            <td>{{ standard.animalProtein * 100 }}%</td>
                            <td>{{ nutrition.animalProtein }}</td>
                            <td>{{ animalProteinPer | numFilter }}%</td>
                            <td>
                                <span v-if="animalProteinPer > standard.animalProtein * 100">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>　动豆蛋白</td>
                            <td>50%</td>
                            <td>{{ standard.peaProtein * 100 }}%</td>
                            <td>{{ nutrition.peaProtein }}</td>
                            <td>{{ peaProteinPer | numFilter }}%</td>
                            <td>
                                <span v-if="peaProteinPer > standard.peaProtein * 100">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>钙(mg)</td>
                            <td>765</td>
                            <td>{{ standard.calcium }}</td>
                            <td>{{ nutrition.calcium }}</td>
                            <td>{{ calciumPer | numFilter }}%</td>
                            <td>
                                <span v-if="calciumPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>维生素A(ug)</td>
                            <td>351</td>
                            <td>{{ standard.vitamineA }}</td>
                            <td>{{ nutrition.vitamineA }}</td>
                            <td>{{ vitamineAPer | numFilter }}%</td>
                            <td>
                                <span v-if="vitamineAPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>维生素B1(mg)</td>
                            <td>0.76</td>
                            <td>{{ standard.vitamineB1 }}</td>
                            <td>{{ nutrition.vitamineB1 }}</td>
                            <td>{{ vitamineB1Per | numFilter }}%</td>
                            <td>
                                <span v-if="vitamineB1Per > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>维生素B2(mg)</td>
                            <td>0.68</td>
                            <td>{{ standard.vitamineB2 }}</td>
                            <td>{{ nutrition.vitamineB2 }}</td>
                            <td>{{ vitamineB2Per | numFilter }}%</td>
                            <td>
                                <span v-if="vitamineB2Per > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>维生素C(mg)</td>
                            <td>48</td>
                            <td>{{ standard.vitamineC }}</td>
                            <td>{{ nutrition.vitamineC }}</td>
                            <td>{{ vitamineCPer | numFilter }}%</td>
                            <td>
                                <span v-if="vitamineCPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>维生素E(mg)</td>
                            <td>6.8</td>
                            <td>{{ standard.vitamineE }}</td>
                            <td>{{ nutrition.vitamineE }}</td>
                            <td>{{ vitamineEPer | numFilter }}%</td>
                            <td>
                                <span v-if="vitamineEPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>维生素PP(mg)</td>
                            <td>7.6</td>
                            <td>{{ standard.vitaminePP }}</td>
                            <td>{{ nutrition.vitaminePP }}</td>
                            <td>{{ vitaminePPPer | numFilter }}%</td>
                            <td>
                                <span v-if="vitaminePPPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>钾(mg)</td>
                            <td>1147</td>
                            <td>{{ standard.kalium }}</td>
                            <td>{{ nutrition.kalium }}</td>
                            <td>{{ kaliumPer | numFilter }}%</td>
                            <td>
                                <span v-if="kaliumPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>镁(mg)</td>
                            <td>156</td>
                            <td>{{ standard.magnesium }}</td>
                            <td>{{ nutrition.magnesium }}</td>
                            <td>{{ magnesiumPer | numFilter }}%</td>
                            <td>
                                <span v-if="magnesiumPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>铁(mg)</td>
                            <td>9.8</td>
                            <td>{{ standard.ferrum }}</td>
                            <td>{{ nutrition.ferrum }}</td>
                            <td>{{ ferrumPer | numFilter }}%</td>
                            <td>
                                <span v-if="ferrumPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>锌(mg)</td>
                            <td>5.2</td>
                            <td>{{ standard.zinc }}</td>
                            <td>{{ nutrition.zinc }}</td>
                            <td>{{ zincPer | numFilter }}%</td>
                            <td>
                                <span v-if="zincPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>磷(mg)</td>
                            <td>341</td>
                            <td>{{ standard.phosphorus }}</td>
                            <td>{{ nutrition.phosphorus }}</td>
                            <td>{{ phosphorusPer | numFilter }}%</td>
                            <td>
                                <span v-if="phosphorusPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>硒(ug)</td>
                            <td>29.1</td>
                            <td>{{ standard.selenium }}</td>
                            <td>{{ nutrition.selenium }}</td>
                            <td>{{ seleniumPer | numFilter }}%</td>
                            <td>
                                <span v-if="seleniumPer > 80">OK！</span>
                                <span v-else>少！</span>
                            </td>
                        </tr>
                        <tr>
                            <td>胡萝卜素(ug)</td>
                            <td></td>
                            <td></td>
                            <td>{{ nutrition.renieratene }}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>胆固醇(mg)</td>
                            <td></td>
                            <td></td>
                            <td>{{ nutrition.cholesterol }}</td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>纤维(g)</td>
                            <td></td>
                            <td></td>
                            <td>{{ nutrition.fibre }}</td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="myEcharts" style="width: 100%; height: 500px;"></div>
        </div>
    </@mc.content>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                info: {},
                nutrition: [],
                standard: {
                    heat: 913, // kcal
                    carbohydrateHeating: [0.5, 0.65], // %
                    adiposeHeating: [0.2, 0.35], // %
                    proteinHeating: [0.12, 0.15], // %
                    protein: 21, // g
                    animalProtein: 0.3, // g
                    peaProtein: 0.5, // g
                    calcium: 535, // mg
                    vitamineA: 246, // ug
                    vitamineB1: 0.54, // mg
                    vitamineB2: 0.48, // mg
                    vitamineC: 34, // mg
                    vitamineE: 4.8, // mg
                    vitaminePP: 5.4, // mg
                    kalium: 803, // mg
                    magnesium: 110, // mg
                    ferrum: 6.9, // mg
                    zinc: 3.7, // mg
                    phosphorus: 239, // mg
                    selenium: 20.4 // ug
                },
                days: ''
            }
        },
        computed: {
            heatPer: function() { return this.nutrition.heat / this.days / this.standard.heat * 100 },
            carbohydrateHeatingPer: function() { return this.nutrition.carbohydrateHeating / this.days / this.nutrition.heat * 100 },
            adiposeHeatingPer: function() { return this.nutrition.adiposeHeating / this.days / this.nutrition.heat * 100 },
            proteinHeatingPer: function() { return this.nutrition.proteinHeating / this.days / this.nutrition.heat * 100 },
            proteinPer: function() { return this.nutrition.protein / this.days / this.standard.protein * 100 },
            animalProteinPer: function() { return this.nutrition.animalProtein / this.days / this.nutrition.protein * 100 },
            peaProteinPer: function() { return this.nutrition.peaProtein / this.days / this.nutrition.protein * 100 },
            calciumPer: function() { return this.nutrition.calcium / this.days / this.standard.calcium * 100 },
            vitamineAPer: function() { return this.nutrition.vitamineA / this.days / this.standard.vitamineA * 100 },
            vitamineB1Per: function() { return this.nutrition.vitamineB1 / this.days / this.standard.vitamineB1 * 100 },
            vitamineB2Per: function() { return this.nutrition.vitamineB2 / this.days / this.standard.vitamineB2 * 100 },
            vitamineCPer: function() { return this.nutrition.vitamineC / this.days / this.standard.vitamineC * 100 },
            vitamineEPer: function() { return this.nutrition.vitamineE / this.days / this.standard.vitamineE * 100 },
            vitaminePPPer: function() { return this.nutrition.vitaminePP / this.days / this.standard.vitaminePP * 100 },
            kaliumPer: function() { return this.nutrition.kalium / this.days / this.standard.kalium * 100 },
            magnesiumPer: function() { return this.nutrition.magnesium / this.days / this.standard.magnesium * 100 },
            ferrumPer: function() { return this.nutrition.ferrum / this.days / this.standard.ferrum * 100 },
            zincPer: function() { return this.nutrition.zinc / this.days / this.standard.zinc * 100 },
            phosphorusPer: function() { return this.nutrition.phosphorus / this.days / this.standard.phosphorus * 100 },
            seleniumPer: function() { return this.nutrition.selenium / this.days / this.standard.selenium * 100 }
        },
        mounted: function() {
            var infoJsonStr = '${info!}';
            if (infoJsonStr != '') {
                this.info = JSON.parse(infoJsonStr).attrs;
            }
            var nutriJsonStr = '${nutrition!}';
            if (nutriJsonStr != '') {
                this.nutrition = JSON.parse(nutriJsonStr);
            }
            this.days = '${days!}';
            this.initChart();
        },
        methods: {
            initChart() {
                var self = this;
                var dom = document.getElementById("myEcharts");
                var myChart = echarts.init(dom);
                var app = {};
                var option = {
                    title: {
                        text: '营养素实给量占标准量百分比例（一般合格参考值：>80%）',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 'normal'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['热量', '蛋白质', '钙', '维A', '维B1', '维B2', '维C', '维E', '维PP', '钾', '镁', '铁', '锌', '磷', '硒']
                    },
                    yAxis: {
                        type: 'value',
                        name: '实给 %'
                    },
                    tooltip: {
                        show: true
                    },
                    series: [{
                        data: [
                            self.heatPer,
                            self.proteinPer,
                            self.calciumPer,
                            self.vitamineAPer,
                            self.vitamineB1Per,
                            self.vitamineB2Per,
                            self.vitamineCPer,
                            self.vitamineEPer,
                            self.vitaminePPPer,
                            self.kaliumPer,
                            self.magnesiumPer,
                            self.ferrumPer,
                            self.zincPer,
                            self.phosphorusPer,
                            self.seleniumPer
                        ],
                        type: 'bar'
                    }]
                };;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            del(id) {
                confirm("id:" + id, function() {
                    alert("delete " + id);
                })
            }
        },
        filters: {
            numFilter(value) {
                let realVal = Number(value).toFixed(2)
                return Number(realVal)
            }
        }
    })
    </script>
    <style type="text/css">
    .page {
        padding: 15px;
    }

    .title {
        margin-bottom: 10px;
        font-size: 1.2em;
    }

    .info {
        display: flex;
        margin-bottom: 10px;
    }

    .info>div {
        margin-right: 20px;
    }

    .table {
        margin-bottom: 10px;
    }

    .nutrition-detail {
        margin-bottom: 10px;
    }

    .nutrition-detail .nutrition-detail-title {}
    </style>
</body>

</html>